<template>
<div class="pbottom">
  <div class="pheaders" :style="{backgroundImage: 'url('+ (carInfos.usedStatus?ytgBg:wtgBg) +')' }">
    <div class="detailCol">
      <div class="dcol1" style="overflow: hidden">
        <div class="dcontent"  >
          <div  class="winfo" v-if="weatherInfo.img">
            <label>今天</label>
            <label>{{weatherInfo.date}}</label>
            <label class="bigz">{{weatherInfo.week}}</label>
            <label><div class="whImg"><img :src="'http://yxc.cs.12366.com/weather/'+weatherInfo.img+'.png'"/> </div></label>
            <label style="width:100%;" v-if="weatherInfo && weatherInfo.index.length>0">{{weatherInfo.index[4].iname+':'+weatherInfo.index[4].ivalue}}</label>
          </div>
             </div>
      </div>
      <div class="dcol1" v-if="!carInfos.usedStatus">
        <div class="dcontent">
          <div class="ltext">
            <p>出租空置豪车，获取高额收益</p>
            <label class="labelBtn" @click="gozu()">出租豪车</label>
        </div> </div>
      </div>
      <div class="dcol1" v-if="carInfos.usedStatus=='FREEING' || carInfos.usedStatus=='PASS' || carInfos.usedStatus =='SIGNED'">
        <div class="monthdcontent">
          <label class="fl">月租金(元)</label>
          <label class="fr cnumb">{{carInfos.carNumber}}</label>
          <div class="cl"></div>
          <div class="nMoney">
            <b>{{orderInfo.monthAmount?orderInfo.monthAmount:'--'}}元</b>
            <span class="stypes"  v-if="carInfos.cycle == 'M'">(月度)</span>
            <span class="stypes" v-if="carInfos.cycle == 'Q'">(季度)</span>
            <span  class="stypes" v-if="carInfos.cycle == 'Y'">(年)</span>
          </div>

          <div class="ckzj_c">
            <label class="zjbtn" @click="gozuMoney()">查看租金</label>
          </div>
        </div>
      </div>
      <div class="dcol1" v-if="carInfos.usedStatus =='USING' || carInfos.usedStatus == 'WAITING'">
        <div class="monthdcontent">
          <label class="fl">月租金(元)</label>
          <label class="fr cnumb">{{carInfos.carNumber}}</label>
          <div class="cl"></div>
          <div class="nMoney">
            <b>{{orderInfo.monthAmount?orderInfo.monthAmount:'--'}}元</b>
            <span  class="stypes" v-if="orderInfo.cycle == 'M'">(月度)</span>
            <span  class="stypes" v-if="orderInfo.cycle == 'Q'">(季度)</span>
            <span  class="stypes" v-if="orderInfo.cycle == 'Y'">(年)</span>
          </div>

          <div class="ckzj_c">

            <label class="zjbtn" @click="gozuMoney()">查看租金</label>
          </div>


        </div>
      </div>
    </div>


  </div>
  <!--<div class="picons">-->
    <!--<ul>-->
      <!--<li>-->
        <!--<div class="shortIcon">-->
          <!--<div class="sicon">-->
              <!--<img src="./img/p_icons1.png"/>-->
          <!--</div>-->
          <!--<div class="stext">-->
            <!--加油-->
          <!--</div>-->
        <!--</div>-->
      <!--</li>-->
      <!--<li>-->
        <!--<div class="shortIcon">-->
          <!--<div class="sicon">-->
              <!--<img src="./img/p_icons2.png"/>-->
          <!--</div>-->
          <!--<div class="stext">-->
            <!--违章-->
          <!--</div>-->
        <!--</div>-->
      <!--</li>-->
      <!--<li>-->
        <!--<div class="shortIcon">-->
          <!--<div class="sicon">-->
              <!--<img src="./img/p_icons3.png"/>-->
          <!--</div>-->
          <!--<div class="stext">-->
            <!--保险-->
          <!--</div>-->
        <!--</div>-->
      <!--</li>-->
      <!--<li>-->
        <!--<div class="shortIcon">-->
          <!--<div class="sicon">-->
              <!--<img src="./img/p_icons4.png"/>-->
          <!--</div>-->
          <!--<div class="stext">-->
            <!--金融-->
          <!--</div>-->
        <!--</div>-->
      <!--</li>-->
    <!--</ul>-->
  <!--</div>-->
  <div class="p_banner" @click="gopro()">
    <img src="./img/videopic.png"/>
  </div>
  <div class="psetp"  v-if="!carInfos.usedStatus">
      <h3>获取租金收益流程</h3>
      <div  class="psetpContent">
        <img   src="./img/setp1.png"/>
        <div class="setpCur">
          您需要准备的材料包括：行驶证正副本照片、保单（交强、商业）照片
        </div>
      </div>

    <div class="libtn">
      <button  class="buttonOk" @click="gozu()">立即出租豪车</button>
    </div>
  </div>
  <div v-if="carInfos.usedStatus=='FREEING'">
    <div class="psetp"  >
      <h3>获取租金收益流程</h3>
      <div  class="psetpContent">
        <img   src="./img/setp2.png"/>
      </div>
    </div>
    <div class="psetp"  >
      <h3>车牌号：{{carInfos.carNumber}}
        <span  v-if="carInfos.certStatus == 'REVIEW'" class="shz_icon"><img src="./img/shz_icon.png"/> </span>
        <span  v-if="carInfos.certStatus == 'NOTPASS'" class="shz_icon"><img src="./img/wtg_icon.png"/> </span>
        <span  v-if="carInfos.certStatus == 'PASS'" class="shz_icon"><img src="./img/ytg_icon.png"/> </span>
        <label v-if="carInfos.certStatus == 'NOTPASS'" @click="cxtijiao()" class="cxtj">重新提交</label>
      </h3>

      <div  v-if="carInfos.certStatus == 'REVIEW'" class="psetpContent">
        <div class="shz_text">
          <img src="./img/shz_loading.png"/>
          豪车信息审核中
        </div>
      </div>
      <div  v-if="carInfos.certStatus == 'NOTPASS'" class="psetpContent">
        <div class="shz_text">
          <img src="./img/shz_loading.png"/>
          豪车信息不通过 | {{carInfos.approveDesc}}
        </div>
      </div>
      <div  v-if="carInfos.certStatus == 'PASS'" class="psetpContent">
        <div class="shz_text">
          <img src="./img/shz_loading.png"/>
          豪车信息审核通过
        </div>
      </div>
    </div>
    <div class="psetp"  >
      <h3>个体工商户注册状态：</h3>
      <div class="gsDesc">
        您当前进度：
        <span v-if="!yyzzInfos.dealStatus">未提交工商登记申请</span>
        <span v-if="yyzzInfos.dealStatus == 'SUBMIT'">您已提交工商登记申请</span>
        <span v-if="yyzzInfos.dealStatus == 'REJECT'">工商登记申请被驳回   <label class="sqbtn" v-if="!yyzzInfos.dealStatus" @click="gonextPersonClear()">重新申请</label></span>
        <span v-if="yyzzInfos.dealStatus == 'PASS'">您工商登记已完成</span>
        <label class="sqbtn" v-if="!yyzzInfos.dealStatus" @click="gonextPerson()">点击申请</label>
        <!--<label class="sqbtn" v-if="yyzzInfos.dealStatus" @click="gonextPerson()">查看</label>-->
      </div>
    </div>

  </div>
  <!--v-if="carInfos.usedStatus =='WAITING'"-->
  <div v-if="carInfos.usedStatus =='WAITING'">
    <div class="psetp"  >
      <h3>获取租金收益流程</h3>
      <div  class="psetpContent">
        <img   src="./img/setp3.png"/>
      </div>
    </div>

    <div class="psetp"  >

      <div class="companyInfo">
        <div v-for="com,index in orderinfoList" class="odrlist">
          <h3> <el-radio v-model="checkedEnterpriseId" :label="com">{{com.enterpriseName}}</el-radio></h3>
          <p>
            统一社会信用代码：<span style="color:#444">{{com.taxpayerNum}}</span>
          </p>
          <p>

            车辆月租金:<span>{{com.monthAmount}}元</span>

          </p>
        </div>

        <p>
          <el-checkbox v-model="checked"></el-checkbox> 已阅读并同意
          <span style="color:#333" @click="showContract()">《三方租赁协议》</span>
        </p>

      </div>

      <div class="libtn" style="padding:10px 0;" >
        <button class="buttonOk"  @click="signAct(1)" >点击确认签约</button>
        <button  class="buttonCancle"  @click="signAct(2)"  >不同意签订此合同</button>
      </div>

    </div>


  </div>
  <div   v-if="carInfos.usedStatus =='SIGNED' || carInfos.usedStatus =='USING'">
    <div class="psetp"  >
      <h3>获取租金收益流程</h3>
      <div  class="psetpContent">
        <img   src="./img/setp4.png"/>
      </div>
    </div>

    <div class="psetp"  >
      <h3>{{orderInfo.enterpriseName}}</h3>
      <div class="companyInfo">
        <p>
          统一社会信用代码：<span style="color:#444">{{orderInfo.taxpayerNum}}</span>
        </p>
        <p v-if="orderInfo.leaseStartDate">
          租赁期限：<span style="color:#444">{{orderInfo.leaseStartDate | timeNumb('yyyy.MM.dd')}}-{{orderInfo.leaseEndDate | timeNumb('yyyy.MM.dd')}}</span>
        </p>
        <p>

          车辆月租金：<span style="color:#FF2126">{{orderInfo.monthAmount}}元</span>
        </p>
        <p>

          <span style="color:#1C67FF" @click="showContract()">《三方租赁协议》</span>
        </p>
        <div class="totalMoney"  @click="gozuMoney()" v-if="tjinfo.total && orderInfo.leaseFeePayStatus=='02'">
          <img src="./img/ydzIcon.png"/>已到账
          <label class="tmoney fr" style="color:#FF2126">{{tjinfo.total}}元</label>
          <div class="cl"></div>
        </div>
        <p>
          签约成功，企业已付款，等待确认收车后，收益到账
        </p>

      </div>



    </div>


  </div>


<gps v-if="gpsRun" @gpsok="gpsok"></gps>
  <mnav cur="1"></mnav>
</div>
</template>

<script>
  import gps from '@/components/gps.vue'
  import { VIEW_PDF_URL } from '../../constants/index'
  export default {
    name: "person-home",
    components:{gps},
    data(){
      return {
        gpsIsActive:false,
        pcur:4,
        checked:true,
        wtgBg:require('./img/wtg_bg.gif'),
        ytgBg:require('./img/ygt_bg.png'),
        yyzzInfos:{
          existenceStatus: null,////存续状态->注册中/REGING；存续/REGED；注销中/CANCELING；已注销/CANCELED
          dealStatus: null,//办理状态->已申请；工商审核通过；下载营业执照；业务授权；税务登记；办理完成
          yyzzName: null,//营业执照名称
          creditCode: null,//统一社会信用代码
          regDate: null,//注册日期
          operatorName: null,//经营者姓名
          operateScope: null,//经营范围
          operatePlace: null,//经营场所
          regAuthority: null,//登记机关
          createDate: null,//创建时间
          yyzzAttachId: null,//电子营业执照附件id
          agentName: null,//经办人姓名
          agentIdCard: null,//经办人身份证号
          agentPhone: null,//经办人手机号
          postCode: null,//经营场所信息---住所邮政编码
          acreage: null,//面积
          homeOwner: null,//房屋所有权人
          contactPhone: null,//联系电话
          legalFunc: null,//法定功能（用途）
          usedRight: null,//使用权取得
          usedPeriod: null//使用期限
        },
        carInfos:{
          carNumber: null,//车牌号
          monthAmount: null,//月租金
          cycle: null,//结算周期->月度；季度；年度
          usedStatus: null,//空闲中/FREEING; 待签约/WAITING； 已签约/SIGNED；租用中/USING；
          certStatus: null,//认证状态->待审核/REVIEW；认证通过/PASS；认证未通过/NOTPASS
          version: null,//当前版本->与审核表中的审核版本关联
          ownerName: null,//车主姓名
          carAttachList: null,//车附件信息列表
          contractStatus: null,//签约状态(01未签约/02已签约)
          orderStatus: null,//订单状态(01已取消/02进行中/03已完成)
          orderPayStatus: null//订单支付状态(01未支付/02已支付)

        },
        orderinfoList:[],
        checkedEnterpriseId:{},
        tjinfo:{},
        gpsRun:false,
        weatherInfo:{index:[]},
        orderInfo:{}
      }
    },
    created(){
      this.getyyzz()
      this.getcar()
      this.gettotalMoney()
    },
    mounted(){
      this.gpsIsActive = true;
      this.$nextTick(()=>{

        this.gpsRun = true;


      })
      // this.$toast('请sad劳动请sad劳动法萨芬请sad劳动法萨芬请sad劳动法萨芬请sad劳动法萨芬请sad劳动法萨芬法萨芬',100000)

    },
    methods:{
      showContract(){
        window.location.href = VIEW_PDF_URL+'http://dqptcs.12366.com/yxc_sfht_new1.pdf'
      },
      gonextPersonClear(){
        localStorage.removeItem('tempPer')
        this.$router.push({
          path:'/personCar',
          query:{
            funCode:'pcar3'
          }
        })
      },
      gettotalMoney(){
        this.$http.get('yxc/orderExpendPay/getTotalRevenue',{params:{carWxUserId:localStorage.getItem('wxUserId')}}).then(res=>{
          if(res.code == 200){
          this.tjinfo = res.data
        }
      })
      },
      cxtijiao(){
        localStorage.removeItem('cinfo')
        this.$router.replace({
          path:'/personCar',
          query:{
            funCode:'pcar1'
          }
        })
      },
      gpsok(obj){

        var latlngStr = obj.latitude+','+obj.longitude
        // alert(JSON.stringify(latlngStr))
        this.$http.post('yxc/wxuser/weather/query',{
        "location":latlngStr
        }).then(res=>{
          this.weatherInfo = JSON.parse(res.data).result
        })


      },
      // gpsokTest(){
      //
      //   // var latlngStr = obj.latitude+','+obj.longitude
      //   this.$http.post('yxc/wxuser/weather/query',{
      //     "location":"39.95933,116.29845"
      //   }).then(res=>{
      //     this.weatherInfo = JSON.parse(res.data).result
      //   })
      //
      //
      // },
      gopro(){
        this.$router.push({
          path:'/personCar',
          query:{
            funCode:'yxc_pro'
          }
        })
      },
      checkBank(){
        return new Promise((resove,reject)=>{
          this.$http.get('yxc/wxuser/bank/queryBankList').then(res=>{

            resove(res.data)


      })
        })

      },
      orderOk(str){

        this.$http.get('/yxc/order/merSign',{params:{
          id:this.checkedEnterpriseId.id,
          isOr:str
          }}).then(res=>{
            if(res.code == 200){
                  this.$toast('操作成功');
                  setTimeout(()=>{
                    this.getyyzz()
          this.getcar()
                  },2000)

            }else{
              this.$toast(res.messsage)
        }

        })
      },
      getcar(){
        this.$http.get('yxc/car/viewByWxUserId').then(res=>{
          if(res.code == 200){
            this.carInfos = res.data
                if(this.carInfos.usedStatus =='WAITING'){
                   this.getOrderInfo(this.carInfos.carNumber)
                }
                if(this.carInfos.usedStatus =='SIGNED' || this.carInfos.usedStatus =='USING'){
                   this.getorderInfoDetail(this.carInfos.carNumber)
                }
            }
        })
      },
      getorderInfoDetail(carNumber){//订单详细信息
        this.$http.post('yxc/order/orderInfo',{
          "carNumber":carNumber,
          "contractStatus": "02",

          "carWxUserId":localStorage.getItem('wxUserId'),
          "orderStatus": "02"

        }).then(res=>{
          if(res.code == 200){
            this.orderInfo = res.data
            }
        })
      },
      signAct(str){
        if(!this.checkedEnterpriseId.id){
          this.$toast('请先选择企业')
          return false;
        }
        if(!this.checked){
          this.$toast('请先同意三方租赁协议')
          return false;
        }
        // this.$mPromot()







        if(str==1){

          this.checkBank().then(datas=>{

            if(!datas || datas.length == 0){
            this.$mPromot({
              width: '80%',
              title: '提示',
              funCode: 'comfims',
              props: {
                type:'confirm',
                btn2:'确定',
                info: '您还没有绑定银行卡，点击确定去绑定'
              },
              callback: (close,selstr) => {
              close();
            if(selstr){
              this.$router.push({
                path:'/center',
                query:{
                  funCode:'bankCard'
                }
              })
            }

          }
          })

          }else{

            this.$mPromot({
              width: '80%',
              title: '提示',
              funCode: 'comfims',
              props: {
                btn2:'确定',
                type:'confirm',
                info: '确定和<span style="color:red">'+this.checkedEnterpriseId.enterpriseName+'</span>签约吗'
              },
              callback: (close,str) => {
              close();
            if(str){
              this.orderOk(1)

            }

          }
          })

          }})



        }

        if(str==2){

          this.$mPromot({
            width: '80%',
            title: '提示',
            funCode: 'comfims',
            props: {
              btn2:'确定',
              type:'confirm',
              info: '您要取消<span style="color:red">'+this.checkedEnterpriseId.enterpriseName+'</span>签约吗'
            },
            callback: (close,str) => {
            if(str){
              this.orderOk(0)
            }
            close();
        }
        })

        }



      },
      getyyzz(){
        this.$http.get('yxc/merchant/viewMerByWxUserId').then(res=>{
          if(res.code == 200){
            this.yyzzInfos = res.data

        }
        })
      },
      getOrderInfo(id){
        this.$http.post('yxc/order/queryList',{
          "carNumber":id,
          "contractStatus":"01",
          "orderStatus":"00",
          "carWxUserId":localStorage.getItem('wxUserId'),

        }).then(res=>{
          if(res.code ==200){
              this.orderinfoList =  res.data
          }
        })
      },
      gozu(){
        this.$router.replace({
          path:'/personCar',
          query:{
            funCode:'pcar1'
          }
        })
      },
      gozuMoney(){
        this.$router.push({
          path:'/personCar',
          query:{
            funCode:'zujinDetail'
          }
        })
      },
      gonextPerson(){
        this.$router.push({
          path:'/personCar',
          query:{
            funCode:'pcar3'
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .winfo{
    color:#FFF;font-size:12px;
    label{display: block; width:50%;}
    display:flex;
    flex-wrap: wrap;
    .bigz{font-size:18px;padding:10px 0;}
    .whImg{
      position: relative;
      top:5px;
      width:35px;
      img{width:100%;}

    }
    padding:20px 0 0 20px
  }
  .ckzj_c{
    margin-top:10px;
    .zjbtn{

        background:#FFF;
        color:#347FFF;
        font-size:12px;
        border-radius:100px;
        padding:1px 8px;
        display: inline-block;



    }
    text-align: left;

  }
  .monthdcontent{
    font-size:12px;
    color:#FFF;
    /*padding-top: 30px;*/
    padding:20px;
    padding-top:30px;
    padding-left: 0;
    .cnumb{
      padding:0 3px;
      background: rgba(255,255,255,.3);
      border-radius: 8px;
    }
    .nMoney{
      padding-top:10px;
      b{font-size:16px;}
      .stypes{
        position: absolute;
        right:10px;
        bottom:0px;
      }
      position: relative;
    }
  }
  .detailCol{
    display: flex;
    .dcol1{
      width:100%;
      .dcontent{
        padding:10px;

        .ltext{font-size:12px; color:#FFF; position: relative; top:70px;
          .labelBtn{
            background:#FFF;
            color:#347FFF;
            font-size:12px;
            border-radius:100px;
            padding:3px 3px;
            display: block;
            width:80%;margin:0 auto;
          }
          text-align: center;
        }

      }
    }
  }

  .odrlist{
    border-bottom: 1px solid #EEE;padding:10px 0 0 0;
    h3{
      .el-radio__label{font-size:16px!important; position: relative!important;
        top:5px!important;}
    }
  }
  .totalMoney{
    img{display: inline;width:18px; position: relative; top:3px;margin-right:5px;
    }
    font-size:16px;
    box-shadow:0px 0px 15px 0px rgba(44,49,140,0.11);
    border-radius:10px;
    padding:10px;
    margin:0 0px;

  }
  .companyInfo{

    color:#999;font-size:14px;
    h3{
      color:#333;
      .el-radio__label{
       font-size:16px;
      }
    }
  }
  .gsDesc{
    font-size:14px; color:#999;
    margin-bottom: 20px;
    position: relative;
    .sqbtn{
      position: absolute;
      right:10px; bottom:0px;
      padding:5px 8px;
      border-radius: 5px;
      border: none;
      background:rgba(28,103,255,1);
      color: #FFF;

      /*box-shadow: 0 10px 20px rgba(102, 177, 255, .3);*/

      font-size:12px;
    }
  }
  .pbottom{
    padding-bottom: 50px;
  }
  .setpCur{
    color:#666;font-size:14px;
    padding: 20px 0 20px 0;
  }
  .libtn {
    border: none;
text-align: center;
    .buttonOk {
      padding:10px 0;
      border-radius: 5px;
      border: none;
      background:rgba(28,103,255,1);
      color: #FFF;
      font-size: 35px;
      /*box-shadow: 0 10px 20px rgba(102, 177, 255, .3);*/
      width: 90%;
      font-size:18px;
      margin-bottom: 10px;
    }.buttonCancle {
      padding:10px 0;
      border-radius: 5px;

    border:1px solid rgba(191,191,191,1);
    background: #FFF;
      color: #666;
      font-size: 35px;
      /*box-shadow: 0 10px 20px rgba(102, 177, 255, .3);*/
      width: 90%;
      font-size:18px;
    }
  }

  .picons{
    ul{
      display: flex;
      background: #FFF;
      padding:10px 0;
      li{width:25%;
      .shortIcon{
        text-align: center;
        .sicon{
          width:50px;
          margin: 0 auto;
          height:50px;
          img{width:100%}
        }
        .stext{color:#666; text-align: center; font-size:14px;}

      }
      }
    }
  }
  .pheaders{
    height: 198px;
    box-sizing: border-box;
    padding-top:10px;
    background-position: center;
    background-size: 100% 100%;

  }
  .p_banner{
    background: #FFF;
    padding: 10px;
    margin-top:10px;

    img{
      width:100%;}
  }
  .psetp{
    padding:10px 10px 10px 10px;
    margin-top:10px;
    background:#FFF;
    h3{margin:0;padding: 0;font-size:18px; position: relative; font-weight: 500; margin-bottom: 10px;
    .shz_icon{position: absolute; img{width:40px; margin-top:-5px; margin-left:10px;}}
    .cxtj{
      position: absolute; font-weight: normal; color:#1C67FF; right:10px; top:0px; border:1px solid #1C67FF;border-radius: 5px;padding:3px 10px;font-size:14px;
    }

    }
    .shz_text{
      background:rgba(240,248,255,1);
      text-align: center;
      font-size:14px;
      color:rgba(154,154,154,1);
      padding:5px 0;
      margin:10px 0;
      img{width:12px; display: inline-block; position: relative; top:1px;}
    }
  }
  .psetpContent{
    padding:10px 0 0px 0;
    img{width:100%;}
  }
</style>
